<template>
  <div id="code">
    <img class="logo" alt="Lemon logo" src="../assets/lemon.png">
    <!-- <h1> {{ msg }}</h1>-->
    <div class="quill-cont">
      <pre v-text="tips" class="tips"></pre>
      <div id="editor-div">
        <button type="button" class="btn" @click="saveContent()">保存</button>
        <button type="button" class="btn right" @click="getContentList()">获取列表</button>
        <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>
      </div>
      <pre v-text="tipsList" class="tips"></pre>
    </div>
  </div>
</template>

<script>
import hljs from 'highlight.js';


export default {
  name: "CodeView",
  props: {
    msg: String
  }, data() {
    return {
      // baseUrl: "http://www.ezzz.top:8100",
      baseUrl: "http://127.0.0.1:8100",
      language: 'java',
      content: '',
      old: "",
      tips: "这里是你保存的代码地址",
      tipsList: "历史记录",
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code-block"],
            [{align: []}],
            [{header: 1}, {header: 2}],
            [{list: "ordered"}, {list: "bullet"}],
            [{indent: "-1"}, {indent: "+1"}],
            [{color: []}, {background: []}],
          ],
          syntax: {
            highlight: text => {
              return hljs.highlightAuto(text).value;
            }
          }
        }
      }
    }
  }, mounted() {
    // Vue.axios.get(api).then((response) => {      console.log(response.data)    })
    // this.axios.get(api).then((response) => {      console.log(response.data)    })
    // this.$http.get(api).then((response) => {      console.log(response.data)    })
    this.getContent()
  },
  methods: {
    configLanguage: function () {
      hljs.configure({languages: [this.language]});
    },
    addTips: function (tip) {
      this.tips += tip;
    },
    saveContent: function () {
      if (this.content === this.old) {
        return false;
      }
      if (this.content) {
        let time = new Date().getTime();
        let url = window.location.href, base = url.split("#")[0];
        let that = this;
        this.$http.post(this.baseUrl + "/saveCode", {time: time, code: this.content})
            .then(response => {
              let result = response.data;
              if (result.code === 200) {
                that.addTips("\n " + base + "#" + time)
                that.old = that.content
              }
            }).catch(err => {
          console.log(err)
        })
      } else {
        this.addTips("请输入代码 ")
      }
    },
    getContent() {
      let url = window.location.href, base = url.split("#")[0];
      let key = url.replace(base, "").replace("#", "")
      if (key) {
        let that = this;
        this.$http.get(this.baseUrl + "/queryCode", {params: {time: key}})
            .then(response => {
              let result = response.data;
              if (result.code === 200) {
                let codeList = result.data
                let codeView = "历史记录";
                for (let i = 0; i < codeList.length; i++) {
                  codeView += codeList[i].code
                }
                that.content = codeView;
              }
            }).catch(err => {
          console.log(err)
        })

      }
    },
    getContentList() {
      let that = this
      this.$http.get(this.baseUrl + "/queryList", {params: {time: null}})
          .then(response => {
                let result = response.data;
                if (result.code === 200) {
                  let codeList = result.data
                  this.tipsList=""
                  for (let one of codeList) {
                    this.tipsList += "\n " + that.baseUrl + "#" + one.time
                  }
                }
              }
          ).catch(err => {
        console.log(err)
      })

    }

  }
}
</script>

<style scoped>
.logo {
  width: 50px;
  height: 50px;
}

.tips {
  text-align: left;
  border: darksalmon 1px dashed;
  margin: 5px 0;
  padding: 2px;
}

.quill-cont {
  margin: 0 10%;
  min-height: 300px;

}

#editor-div {
  text-align: left;
}

.quill-cont .quill-editor {
  min-height: 300px;
  text-align: left;
}

#quill-cont .quill-editor .ql-container {
  min-height: 300px;
}

.btn {
  background-color: #70b273;
  border: none;
  border-radius: 2px;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

.right {
  float: right;
}

.btn:hover {
  background-color: #1d8c21;
  cursor: pointer;
}
</style>